<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            let Dom=document.querySelector("#aa");
            function changeObj(Dom){
                let obj={};
                obj.tag=Dom.tagName.toLowerCase();
                if(Dom.attributes.length){
                    obj.attr={};
                    for(let  key of Dom.attributes){
                        if(key.name=="class"){
                            var temp=key.value.split(" ")
                            obj.attr[key.name]=temp
                        }else if(key.name=="style"){
                            obj.attr.style={};
                            var tempstyle=key.value.split(";")
                            for( var i=0; i< tempstyle.length-1;i++ ){
                                var tempss=tempstyle[i].split(":");
                                obj.attr["style"][tempss[0]]=tempss[1];
                            }
                        }else{
                            obj.attr[key.name]=key.value;  
                        }                        
                    }
                }
                // console.log(Dom.childNodes);
                if(Dom.childNodes.length){
                    obj.children=[];
                    for(var val of Dom.childNodes){
                        if(val.data &&val.data.trim().length>3){
                            obj.children.push(val.data.trim());
                        }
                        if(val.localName){
                            var cNode=changeObj(val);
                            obj.children.push(cNode);
                            // console.log(1111);
                        }
                        // console.log(val);
                    }
                }
                console.log(obj);
                return obj;
            }
            changeObj(Dom);
            // console.log(Dom.tagName);
            // console.log(obj);
        }

    </script>
</head>

<body>
    <div class="a b c" id="aa" style="color: red; background-color: rgb(204, 204, 204);" >
        内容文本1

        <p itany="网博" style="color: red; background-color: rgb(204, 204, 204);">
            内容文本2
            <span style="color: rgb(51, 51, 51);">提示信息</span>
        </p>
        <div>内容文本3</div>
    </div>
</body>

</html>